{{extend './head.html'}}
{{block 'content'}}
<div class="order">
    <!-- 我的订单头部 -->
    <div class="order-header">
        <div class="order-header-content">
            <p>
                <i class="el-icon-s-order" style="font-size: 30px;color: #ff6700;"></i>
                我的订单
            </p>
        </div>
    </div>
    <!-- 我的订单头部END -->

    <div class="layui-tab">
        <ul class="layui-tab-title" style="display: flex;justify-content: center;">
            <li class="layui-this">未发货</li>
            <li>已发货</li>
            <li>已收货</li>
            <li>等待退货</li>
            <li>已退货</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <!-- 我的订单主要内容 -->
                {{if data.length>0}}
                <div class="order-content">
                    {{each data}}
                    {{if $value.orderState == 0}}
                    <div class="item-content">
                        <ul>
                            <li class="order-info" style="border-bottom: none;">
                                <div class="order-id">订单编号: {{$value.id}}</div>
                                <div class="order-time">订单时间: {{$value.orderDate}}</div>
                            </li>
                            <li class="order-info">
                                <div class="order-id">订单状态:
                                    {{if $value.orderState == 0}}
                                    未发货
                                    {{/if}}
                                    {{if $value.orderState == 1}}
                                    已发货
                                    {{/if}}
                                    {{if $value.orderState == 2}}
                                    已收货
                                    {{/if}}
                                    {{if $value.orderState == 3}}
                                    退货
                                    {{/if}}
                                </div>
                                <button type="button" data-orderId="{{$value.id}}"
                                    class="layui-btn del-btn delshop order-time"
                                    style="position: relative;top: 12px;">删除订单</button>
                                {{if $value.orderState == 1}}
                                <button type="button" data-orderId="{{$value.id}}"
                                    class="deliver-card layui-btn  del-btn"
                                    style="position: relative;left: 20px;">确认收货</button>
                                {{/if}}
                                {{if $value.orderState == 2}}
                                <button type="button" data-orderId="{{$value.id}}"
                                    class="layui-btn  del-btn return-card"
                                    style="position: relative;left: 20px;">退货</button>
                                {{/if}}
                            </li>
                            <li class="header">
                                <div class="pro-img"></div>
                                <div class="pro-name">商品名称</div>
                                <div class="pro-price">单价</div>
                                <div class="pro-num">数量</div>
                                <div class="pro-total">小计</div>
                            </li>
                            {{each $value.comm}}
                            <li class="product-list">
                                <div class="pro-img">
                                    <img src="{{$value.url}}" />
                                </div>
                                <div class="pro-name">
                                    {{$value.name}}
                                </div>
                                <div class="pro-price">{{$value.porice}}元</div>
                                <div class="pro-num">{{$value.number}}</div>
                                <div class="pro-total pro-total-in">{{$value.number*$value.porice}}元</div>
                            </li>
                            {{/each}}
                            <div class="order-bar">
                                <div class="order-bar-left">
                                    <span class="order-total">
                                        共
                                        <span class="order-total-num">{{$value.count}}</span> 件商品
                                    </span>
                                </div>
                                <div class="order-bar-right">
                                    <span>
                                        <span class="total-price-title">合计：</span>
                                        <span class="total-price">{{$value.sum}}元</span>
                                    </span>
                                </div>
                            </div>
                        </ul>
                    </div>
                    {{/if}}
                    {{/each}}
                    <div style="margin-top:-40px;"></div>
                </div>
                <!-- 我的订单主要内容END -->
                {{else}}
                <!-- 订单为空的时候显示的内容 -->
                <div v-else class="order-empty">
                    <div class="empty">
                        <h2>您的订单还是空的！</h2>
                        <p>快去购物吧！</p>
                    </div>
                </div>
                <!-- 订单为空的时候显示的内容END -->
                {{/if}}
            </div>
            <div class="layui-tab-item">
                <!-- 我的订单主要内容 -->
                {{if data.length>0}}
                <div class="order-content">
                    {{each data}}
                    {{if $value.orderState == 1}}
                    <div class="item-content">
                        <ul>
                            <li class="order-info" style="border-bottom: none;">
                                <div class="order-id">订单编号: {{$value.id}}</div>
                                <div class="order-time">订单时间: {{$value.orderDate}}</div>
                            </li>
                            <li class="order-info">
                                <div class="order-id">订单状态:
                                    {{if $value.orderState == 0}}
                                    未发货
                                    {{/if}}
                                    {{if $value.orderState == 1}}
                                    已发货
                                    {{/if}}
                                    {{if $value.orderState == 2}}
                                    已收货
                                    {{/if}}
                                    {{if $value.orderState == 3}}
                                    退货
                                    {{/if}}
                                </div>
                                <button type="button" data-orderId="{{$value.id}}"
                                    class="layui-btn del-btn delshop order-time"
                                    style="position: relative;top: 12px;">删除订单</button>
                                {{if $value.orderState == 1}}
                                <button type="button" data-orderId="{{$value.id}}"
                                    class="deliver-card layui-btn  del-btn"
                                    style="position: relative;left: 20px;">确认收货</button>
                                {{/if}}
                                {{if $value.orderState == 2}}
                                <button type="button" data-orderId="{{$value.id}}"
                                    class="layui-btn  del-btn return-card"
                                    style="position: relative;left: 20px;">退货</button>
                                {{/if}}
                            </li>
                            <li class="header">
                                <div class="pro-img"></div>
                                <div class="pro-name">商品名称</div>
                                <div class="pro-price">单价</div>
                                <div class="pro-num">数量</div>
                                <div class="pro-total">小计</div>
                            </li>
                            {{each $value.comm}}
                            <li class="product-list">
                                <div class="pro-img">
                                    <img src="{{$value.url}}" />
                                </div>
                                <div class="pro-name">
                                    {{$value.name}}
                                </div>
                                <div class="pro-price">{{$value.porice}}元</div>
                                <div class="pro-num">{{$value.number}}</div>
                                <div class="pro-total pro-total-in">{{$value.number*$value.porice}}元</div>
                            </li>
                            {{/each}}
                            <div class="order-bar">
                                <div class="order-bar-left">
                                    <span class="order-total">
                                        共
                                        <span class="order-total-num">{{$value.count}}</span> 件商品
                                    </span>
                                </div>
                                <div class="order-bar-right">
                                    <span>
                                        <span class="total-price-title">合计：</span>
                                        <span class="total-price">{{$value.sum}}元</span>
                                    </span>
                                </div>
                            </div>
                        </ul>
                    </div>
                    {{/if}}
                    {{/each}}
                    <div style="margin-top:-40px;"></div>
                </div>
                <!-- 我的订单主要内容END -->
                {{else}}
                <!-- 订单为空的时候显示的内容 -->
                <div v-else class="order-empty">
                    <div class="empty">
                        <h2>您的订单还是空的！</h2>
                        <p>快去购物吧！</p>
                    </div>
                </div>
                <!-- 订单为空的时候显示的内容END -->
                {{/if}}
            </div>
            <div class="layui-tab-item">
                <!-- 我的订单主要内容 -->
                {{if data.length>0}}
                <div class="order-content">
                    {{each data}}
                    {{if $value.orderState == 2}}
                    <div class="item-content">
                        <ul>
                            <li class="order-info" style="border-bottom: none;">
                                <div class="order-id">订单编号: {{$value.id}}</div>
                                <div class="order-time">订单时间: {{$value.orderDate}}</div>
                            </li>
                            <li class="order-info">
                                <div class="order-id">订单状态:
                                    {{if $value.orderState == 0}}
                                    未发货
                                    {{/if}}
                                    {{if $value.orderState == 1}}
                                    已发货
                                    {{/if}}
                                    {{if $value.orderState == 2}}
                                    已收货
                                    {{/if}}
                                    {{if $value.orderState == 3}}
                                    退货
                                    {{/if}}
                                </div>
                                <button type="button" data-orderId="{{$value.id}}"
                                    class="layui-btn del-btn delshop order-time"
                                    style="position: relative;top: 12px;">删除订单</button>
                                {{if $value.orderState == 1}}
                                <button type="button" data-orderId="{{$value.id}}"
                                    class="deliver-card layui-btn  del-btn"
                                    style="position: relative;left: 20px;">确认收货</button>
                                {{/if}}
                                {{if $value.orderState == 2}}
                                <button type="button" data-orderId="{{$value.id}}"
                                    class="layui-btn  del-btn return-card"
                                    style="position: relative;left: 20px;">退货</button>
                                {{/if}}
                            </li>
                            <li class="header">
                                <div class="pro-img"></div>
                                <div class="pro-name">商品名称</div>
                                <div class="pro-price">单价</div>
                                <div class="pro-num">数量</div>
                                <div class="pro-total">小计</div>
                            </li>
                            {{each $value.comm}}
                            <li class="product-list">
                                <div class="pro-img">
                                    <img src="{{$value.url}}" />
                                </div>
                                <div class="pro-name">
                                    {{$value.name}}
                                </div>
                                <div class="pro-price">{{$value.porice}}元</div>
                                <div class="pro-num">{{$value.number}}</div>
                                <div class="pro-total pro-total-in">{{$value.number*$value.porice}}元</div>
                            </li>
                            {{/each}}
                            <div class="order-bar">
                                <div class="order-bar-left">
                                    <span class="order-total">
                                        共
                                        <span class="order-total-num">{{$value.count}}</span> 件商品
                                    </span>
                                </div>
                                <div class="order-bar-right">
                                    <span>
                                        <span class="total-price-title">合计：</span>
                                        <span class="total-price">{{$value.sum}}元</span>
                                    </span>
                                </div>
                            </div>
                        </ul>
                    </div>
                    {{/if}}
                    {{/each}}
                    <div style="margin-top:-40px;"></div>
                </div>
                <!-- 我的订单主要内容END -->
                {{else}}
                <!-- 订单为空的时候显示的内容 -->
                <div v-else class="order-empty">
                    <div class="empty">
                        <h2>您的订单还是空的！</h2>
                        <p>快去购物吧！</p>
                    </div>
                </div>
                <!-- 订单为空的时候显示的内容END -->
                {{/if}}
            </div>
            <div class="layui-tab-item">
                <!-- 我的订单主要内容 -->
                {{if data.length>0}}
                <div class="order-content">
                    {{each data}}
                    {{if $value.orderState == 3}}
                    <div class="item-content">
                        <ul>
                            <li class="order-info" style="border-bottom: none;">
                                <div class="order-id">订单编号: {{$value.id}}</div>
                                <div class="order-time">订单时间: {{$value.orderDate}}</div>
                            </li>
                            <li class="order-info">
                                <div class="order-id">订单状态:
                                    {{if $value.orderState == 0}}
                                    未发货
                                    {{/if}}
                                    {{if $value.orderState == 1}}
                                    已发货
                                    {{/if}}
                                    {{if $value.orderState == 2}}
                                    已收货
                                    {{/if}}
                                    {{if $value.orderState == 3}}
                                    退货
                                    {{/if}}
                                </div>
                                <button type="button" data-orderId="{{$value.id}}"
                                    class="layui-btn del-btn delshop order-time"
                                    style="position: relative;top: 12px;">删除订单</button>
                                {{if $value.orderState == 1}}
                                <button type="button" data-orderId="{{$value.id}}"
                                    class="deliver-card layui-btn  del-btn"
                                    style="position: relative;left: 20px;">确认收货</button>
                                {{/if}}
                                {{if $value.orderState == 2}}
                                <button type="button" data-orderId="{{$value.id}}"
                                    class="layui-btn  del-btn return-card"
                                    style="position: relative;left: 20px;">退货</button>
                                {{/if}}
                            </li>
                            <li class="header">
                                <div class="pro-img"></div>
                                <div class="pro-name">商品名称</div>
                                <div class="pro-price">单价</div>
                                <div class="pro-num">数量</div>
                                <div class="pro-total">小计</div>
                            </li>
                            {{each $value.comm}}
                            <li class="product-list">
                                <div class="pro-img">
                                    <img src="{{$value.url}}" />
                                </div>
                                <div class="pro-name">
                                    {{$value.name}}
                                </div>
                                <div class="pro-price">{{$value.porice}}元</div>
                                <div class="pro-num">{{$value.number}}</div>
                                <div class="pro-total pro-total-in">{{$value.number*$value.porice}}元</div>
                            </li>
                            {{/each}}
                            <div class="order-bar">
                                <div class="order-bar-left">
                                    <span class="order-total">
                                        共
                                        <span class="order-total-num">{{$value.count}}</span> 件商品
                                    </span>
                                </div>
                                <div class="order-bar-right">
                                    <span>
                                        <span class="total-price-title">合计：</span>
                                        <span class="total-price">{{$value.sum}}元</span>
                                    </span>
                                </div>
                            </div>
                        </ul>
                    </div>
                    {{/if}}
                    {{/each}}
                    <div style="margin-top:-40px;"></div>
                </div>
                <!-- 我的订单主要内容END -->
                {{else}}
                <!-- 订单为空的时候显示的内容 -->
                <div v-else class="order-empty">
                    <div class="empty">
                        <h2>您的订单还是空的！</h2>
                        <p>快去购物吧！</p>
                    </div>
                </div>
                <!-- 订单为空的时候显示的内容END -->
                {{/if}}
            </div>
        </div>
    </div>


</div>
<div id="payment-body" class="payment-body" style="display: none;">
    <div class="payment-img">
        <img src="../public/img/shangpinxiangqing/14.png">
    </div>
    <div class="payment-text">
        扫描二维码支付
    </div>
</div>
{{/block}}
{{block 'contentcss'}}
<style>
    .payment-img {
        width: 200px;
        height: 200px;
    }

    .payment-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40px 60px;
    }

    .payment-img img {
        width: 100%;
        height: 100%;
    }

    .payment-text {
        text-align: center;
        font-size: 12px;
        color: #ccc;
        margin-top: 10px;
    }

    * {
        padding: 0px;
        margin: 0px;
    }

    .order * {
        box-sizing: content-box;
    }

    .order-content,
    .order-header,
    .order,
    .order-empty {
        box-sizing: content-box;
    }

    .del-btn {
        background-color: rgb(255, 103, 0);
    }

    .shopcard {
        margin: 0px auto;
        width: 980px;
    }

    .shopcard-h3 {
        text-align: center;
        margin-top: 10px;
    }

    .shopcard-both {
        border-top: 3px solid #bbbbbb;
    }

    .table-li {
        margin: 20px auto;
    }

    .order {
        background-color: #f5f5f5;
        padding-bottom: 20px;
    }

    /* 我的订单头部CSS */
    .order .order-header {
        height: 64px;
        border-bottom: 2px solid #ff6700;
        background-color: #fff;
        margin-bottom: 20px;
    }

    .order .order-header .order-header-content {
        width: 1225px;
        margin: 0 auto;
    }

    .order .order-header p {
        font-size: 28px;
        line-height: 58px;
        float: left;
        font-weight: normal;
        color: #424242;
    }

    /* 我的订单头部CSS END */
    .order .item-content {
        width: 1225px;
        margin: 0 auto;
        background-color: #fff;
        margin-bottom: 50px;
    }

    .order .item-content ul {
        background-color: #fff;
        color: #424242;
        line-height: 85px;
    }

    /* 我的订单表头CSS */
    .order .item-content ul .order-info {
        height: 60px;
        line-height: 60px;
        padding: 0 26px;
        color: #424242;
        border-bottom: 1px solid #ff6700;
    }

    .order .item-content ul .order-info .order-id {
        float: left;
        color: #ff6700;
    }

    .order .item-content ul .order-info .order-time {
        float: right;
    }

    .order .item-content ul .header {
        height: 85px;
        padding-right: 26px;
        color: #424242;
    }

    /* 我的订单表头CSS END */

    /* 订单列表CSS */
    .order .item-content ul .product-list {
        height: 85px;
        padding: 15px 26px 15px 0;
        border-top: 1px solid #e0e0e0;
        box-sizing: content-box;
    }

    .order .item-content ul .pro-img {
        float: left;
        height: 85px;
        width: 120px;
        padding-left: 80px;
        box-sizing: content-box;
    }

    .order .item-content ul .pro-img img {
        height: 80px;
        width: 80px;
    }

    .order .item-content ul .pro-name {
        float: left;
        width: 380px;
    }

    .order .item-content ul .pro-name a {
        color: #424242;
    }

    .order .item-content ul .pro-name a:hover {
        color: #ff6700;
    }

    .order .item-content ul .pro-price {
        float: left;
        width: 160px;
        padding-right: 18px;
        text-align: center;
    }

    .order .item-content ul .pro-num {
        float: left;
        width: 190px;
        text-align: center;
    }

    .order .item-content ul .pro-total {
        float: left;
        width: 160px;
        padding-right: 81px;
        text-align: right;
    }

    .order .item-content ul .pro-total-in {
        color: #ff6700;
    }

    .order .order-bar {
        width: 1185px;
        padding: 0 20px;
        border-top: 1px solid #ff6700;
        height: 50px;
        line-height: 50px;
        background-color: #fff;
    }

    .order .order-bar .order-bar-left {
        float: left;
    }

    .order .order-bar .order-bar-left .order-total {
        color: #757575;
    }

    .order .order-bar .order-bar-left .order-total-num {
        color: #ff6700;
    }

    .order .order-bar .order-bar-right {
        float: right;
    }

    .order .order-bar .order-bar-right .total-price-title {
        color: #ff6700;
        font-size: 14px;
    }

    .order .order-bar .order-bar-right .total-price {
        color: #ff6700;
        font-size: 30px;
    }

    /* 订单列表CSS END */

    /* 订单为空的时候显示的内容CSS */
    .order .order-empty {
        width: 1225px;
        margin: 0 auto;
    }

    .order .order-empty .empty {
        height: 300px;
        padding: 0 0 130px 558px;
        margin: 65px 0 0;
        /* background: url(../assets/imgs/cart-empty.png) no-repeat 124px 0; */
        color: #b0b0b0;
        overflow: hidden;
    }

    .order .order-empty .empty h2 {
        margin: 70px 0 15px;
        font-size: 36px;
    }

    .order .order-empty .empty p {
        margin: 0 0 20px;
        font-size: 20px;
    }

    /* 订单为空的时候显示的内容CSS END */
</style>
{{/block}}
{{block 'contentjs'}}
<script>
    $('.delshop').on('click', function (e) {
        let orderId = $(this).attr("data-orderId")
        if (confirm('是否取消订单')) {
            $.ajax({
                type: "get",
                url: "/api/delcard?id=" + orderId,
                success: function (res) {
                    if (res.flog) {
                        layer.msg('删除订单成功', { icon: 6 });
                        location.reload();
                    } else {
                        layer.msg('删除订单失败!', { icon: 5, time: 1000 });
                    }
                },
                error: function (err) {
                    // layer.msg('程序异常!', { icon: 5, time: 1000 });
                }
            });
        }
    })
    $('.deliver-card').on('click', function (e) {
        let orderId = $(this).attr("data-orderId")
        layer.open({
            title: '支付',
            type: 1,
            content: $("#payment-body"),
            btn: ["确认支付"],
            yes: function () {
                $.ajax({
                    type: "get",
                    url: "/api/delivercard?id=" + orderId,
                    success: function (res) {
                        if (res.flog) {
                            layer.msg('收货成功', { icon: 6 });
                            location.reload();
                        } else {
                            layer.msg('收货失败!', { icon: 5, time: 1000 });
                        }
                    },
                    error: function (err) {
                        // layer.msg('程序异常!', { icon: 5, time: 1000 });
                    }
                });
            }
        });
    })
    $('.return-card').on('click', function (e) {
        let orderId = $(this).attr("data-orderId")
        if (confirm('是否确认退货')) {
            $.ajax({
                type: "get",
                url: "/api/returncard?id=" + orderId,
                success: function (res) {
                    if (res.flog) {
                        layer.msg('退货成功', { icon: 6 });
                        location.reload();
                    } else {
                        layer.msg('退货失败!', { icon: 5, time: 1000 });
                    }
                },
                error: function (err) {
                    // layer.msg('程序异常!', { icon: 5, time: 1000 });
                }
            });
        }
    })
</script>
{{/block}}